<script setup>

import CodeMirror6Customed from "@/components/CodeMirror6Customed.vue";
import TinyMCECustomed from "@/components/TinyMCECustomed.vue";
import {ref} from "vue";
import {Bottom, Plus, Top} from "@element-plus/icons-vue";
import HoverEnlargable from "@/components/HoverEnlargable.vue";

let theProps = defineProps(["thePopVisible"])
let tinyMCEContentHtml = ref('');
let codeMirrorCode = ref('');

let testPopVisible1 = ref(false);
const activeNames = ref(['1']);
let testStayEnlarged = ref(false);
</script>

<template>
    <TinyMCECustomed v-if="thePopVisible" v-model="tinyMCEContentHtml" :showContenRawTag="false"></TinyMCECustomed>
<!--<br/>-->
<!--    {{tinyMCEContentHtml}}-->
<!--    <br/>-->
  <div class="my-button-group">
    <button class="my-button" @click="codeMirrorCode = tinyMCEContentHtml"><el-icon><Bottom/></el-icon></button>
    <button class="my-button" @click="tinyMCEContentHtml = codeMirrorCode;codeMirrorCode=''"><el-icon><Top/></el-icon></button>
  </div>
<!--    <el-button :icon="Bottom" @click="codeMirrorCode = tinyMCEContentHtml"></el-button>-->
<!--    <el-button :icon="Bottom" @click="codeMirrorCode = tinyMCEContentHtml">to CodeMirror</el-button>-->
<!--    <el-button :icon="Top" @click="tinyMCEContentHtml = codeMirrorCode;codeMirrorCode=''"></el-button>-->
<!--    <el-button :icon="Top" @click="tinyMCEContentHtml = codeMirrorCode">to tinyMCE</el-button>-->

<!--  border: 1px solid blue;-->
    <HoverEnlargable
        style="
              --aniToWidth:800px;
              --aniToHeight:fit-content;
              --shrinkedWidth:50px;
              --shrinkedHeight:30px;
              --overlieWidth:11px;
              --aniFromWidthType:--shrinkedWidth;
              /*border: 1px solid blue;*/
              margin-left: 3px"
        :toStayEnlarged="testStayEnlarged"
        :style="{zIndex:parseInt($attrs[`zIndex`])}">
            <el-switch v-model="testStayEnlarged"
                       inline-prompt
                       active-text="保持"
                       inactive-text="隐藏"
            ></el-switch>
            <br/>
            <CodeMirror6Customed v-model="codeMirrorCode"></CodeMirror6Customed>

    </HoverEnlargable>

<!--    <div class="demo-collapse">-->
<!--        <el-collapse v-model="activeNames">-->
<!--            <el-collapse-item name="1">-->
<!--                <CodeMirror6Customed v-model="codeMirrorCode"></CodeMirror6Customed>-->
<!--            </el-collapse-item>-->
<!--        </el-collapse>-->
<!--    </div>-->


</template>

<style scoped>

</style>